import React, {Component} from 'react'
import {TabBar} from 'antd-mobile'
import homes from '../assets/image/home.png'
import homesActive from '../assets/image/home_active.png'
import link from '../assets/image/link.png'
import linkActive from '../assets/image/link_active.png'
import cart from '../assets/image/cart.png'
import cartActive from '../assets/image/cart_active.png'
import user from '../assets/image/user.png'
import userActive from '../assets/image/user_active.png'

class TabBarBottom extends Component {
    constructor(props) {
        super(props)
        this.state = {
            selectedTab: 'blueTab',
            hidden: false,
            fullScreen: false,
        }
    }
    render() {
        return (
            <TabBar
                unselectedTintColor="#949494"
                tintColor="#e08e1ed1"
                barTintColor="white"
                hidden={this.state.hidden}
            >
                <TabBar.Item
                    title="Home"
                    key="Life"
                    icon={<img alt='' src={homes}
                               style={{
                                   width: '22px',
                                   height: '22px'
                               }}
                    />
                    }
                    selectedIcon={
                        <img alt='' src={homesActive}
                             style={{
                                 width: '22px',
                                 height: '22px'
                             }}
                        />
                    }
                    selected={this.state.selectedTab === 'blueTab'}
                    // badge={1}
                    onPress={() => {
                        this.setState({
                            selectedTab: 'blueTab',
                        });
                    }}
                >
                    {/*{this.renderContent('Life')}*/}
                </TabBar.Item>
                <TabBar.Item
                    icon={<img alt='' src={link}
                               style={{
                                   width: '22px',
                                   height: '22px'
                               }}
                    />
                    }
                    selectedIcon={
                        <img  alt='' src=  {linkActive}
                             style={{
                                 width: '22px',
                                 height: '22px'
                             }}
                        />
                    }
                    title="Love"
                    key="Koubei"
                    // badge={'new'}
                    selected={this.state.selectedTab === 'redTab'}
                    onPress={() => {
                        this.setState({
                            selectedTab: 'redTab',
                        });
                    }}
                >
                </TabBar.Item>
                <TabBar.Item
                    icon={<img alt='' src={cart}
                               style={{
                                   width: '22px',
                                   height: '22px'
                               }}
                    />
                    }
                    selectedIcon={
                        <img alt='' src={cartActive}
                             style={{
                                 width: '22px',
                                 height: '22px'
                             }}
                        />
                    }
                    title="Cart"
                    key="Friend"
                    selected={this.state.selectedTab === 'greenTab'}
                    onPress={() => {
                        this.setState({
                            selectedTab: 'greenTab',
                        });
                    }}
                >
                </TabBar.Item>
                <TabBar.Item
                    icon={<img alt='' src={user}
                               style={{
                                   width: '22px',
                                   height: '22px'
                               }}
                    />
                    }
                    selectedIcon={
                        <img alt='' src={userActive}
                             style={{
                                 width: '22px',
                                 height: '22px'
                             }}
                        />
                    }
                    title="User"
                    key="my"
                    selected={this.state.selectedTab === 'yellowTab'}
                    onPress={() => {
                        this.setState({
                            selectedTab: 'yellowTab',
                        });
                    }}
                >
                </TabBar.Item>
            </TabBar>
        )
    }
}

export default TabBarBottom